<template>
  <div class="operator-list panel-list">
    <!--  header and add operator -->
    <div class="header">
      <div class="header-title">
        <span class="type-icon-name">
          <a-icon-font type="iconsuanfa" />
          <span class="data-operator">算子</span>
        </span>
        <!-- <span class="load-project-data" @click="addEditOperator('create', null)">
          <a-icon type="plus"/>
          <span>新增算子</span>
        </span> -->
      </div>
    </div>
    <!-- search box -->
    <div class="search-box-cont">
      <a-input
        v-model="keyword"
        placeholder="搜索..."
        allow-clear
        class="search-input"
      />
    </div>
    <!--  operator list  -->
    <ul v-if="!searchMode" class="groups scroll-bar">
      <li
        v-for="(group, index) in operatorsGroups"
        :key="index"
        :class="{ expanded: group.collapsed }"
      >
        <!-- group name -->
        <div class="header">
          <div class="label" @click="toggleGroupStatus(group)">
            <a-icon
              class="collapsible-icon"
              :type="collapsedList.includes(group.name) ? 'down' : 'right'"
            />
            <!-- <a-icon-font
              v-if="group.name === '我的收藏'"
              :type="groupIcon(group.subType)"
              class="group-icon"
            /> -->
            {{ group.name }}
          </div>
          <a-tooltip
            v-if="group.name === '我的模型'"
            placement="topLeft"
            :mouse-enter-delay="0.5"
            :overlay-style="{ 'max-width': '250px' }"
          >
            <template slot="title">
              <span>新建文件夹</span>
            </template>
            <a-icon-font
              v-if="group.name === '我的模型'"
              class="add-btn"
              type="iconzengjia"
              @click="addFolder(group)"
            />
          </a-tooltip>
        </div>
        <!-- operator group -->
        <ul v-if="collapsedList.includes(group.name)" class="items">
          <div v-if="editStatus && group.subType === 2" class="header">
            <a-icon-font
              class="folder-icon"
              type="iconwenjianjiazhankai"
            ></a-icon-font>
            <a-input
              v-model="folderName"
              style="height: 24px;"
              auto-focus
              placeholder="用户命名"
              @pressEnter="($event) => $event.target.blur()"
              @blur="createFolder(folderName)"
            ></a-input>
          </div>

          <li
            v-for="(operator, index2) in group.items"
            :key="index2"
            :class="{
              'menu-open':
                operatorGroupIndex === index && operatorItemIndex === index2,
              'hover-item': !operator.isFolder,
            }"
            @click="clickOperatorItem($event)"
          >
            <!-- operator name -->
            <!-- 模型文件夹 -->
            <div v-if="operator.isFolder" class="header">
              <div
                style="align-items: center; display: flex;"
                :style="{ width: '140px' }"
                @click="toggleGroupStatus(operator)"
              >
                <a-icon-font
                  class="folder-icon"
                  :type="
                    collapsedList.includes(operator.name)
                      ? 'iconwenjianjiazhankai'
                      : 'iconwenjianjiashouqi'
                  "
                ></a-icon-font>
                <div>{{ operator.name }}</div>
              </div>
              <a-dropdown :placement="'bottomCenter'" :trigger="['click']">
                <a-icon
                  v-if="operator.edited"
                  type="ellipsis"
                  class="header-btn"
                />
                <a-menu slot="overlay">
                  <!-- <a-menu-item key="1">
                    <span
                      class="item menu-item-btn"
                      >模型详情</span
                    >
                  </a-menu-item> -->
                  <!-- <a-menu-item key="2">
                    <span
                      class="item menu-item-btn"
                      >重命名</span
                    >
                  </a-menu-item> -->
                  <a-menu-item
                    v-if="!isLock"
                    key="3"
                    @click="deleteConfirm(operator, true)"
                  >
                    <span class="item menu-item-btn">删除</span>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
            <!-- 模型 其他算子-->
            <div v-else class="header">
              <div
                class="label"
                :style="{ width: 'calc(100% - 35px)' }"
                :class="{
                  'operator-reject':
                    operator.status === 0 ||
                    operator.status === 2 ||
                    operator.status === 3,
                }"
                @mousedown="startDragging($event, operator)"
              >
                <a-icon-font
                  class="item-icon"
                  :type="iconInfo(operator.type, operator.algType, 'icon')"
                />
                <a-tooltip
                  placement="top"
                  :mouse-enter-delay="0.5"
                  :overlay-style="{ 'max-width': '250px' }"
                >
                  <template slot="title">
                    <span>{{ operator.name }}</span>
                    <!-- 自定义算子显示状态 -->
                    <!-- <span v-if="typeof operator.status === 'number'">({{statusMap[operator.status]}})</span> -->
                    <!-- 驳回的显示驳回意见 -->
                    <!-- <template v-if="operator.status === 2">
                      <br/>
                      <span>审核意见: {{operator.suggestion?operator.suggestion: '-- 空 --'}}</span>
                    </template> -->
                  </template>
                  <span class="label-text">{{ operator.name }}</span>
                </a-tooltip>
              </div>
              <a-dropdown
                :disabled="isLock"
                :placement="'bottomCenter'"
                :trigger="['click']"
                @visibleChange="visibleChange(index, index2)"
              >
                <a-icon type="ellipsis" class="header-btn" />
                <a-menu slot="overlay">
                  <!-- <a-menu-item key="0">
                    <span
                      class="item menu-item-btn"
                      @click="toggleOperatorStarredState(operator)"
                    >
                      <span v-if="operator.starred">取消收藏</span>
                      <span v-else>收藏</span>
                    </span>
                  </a-menu-item> -->
                  <!-- <a-menu-item v-if="operator.edited" key="1">
                    <span
                      class="item menu-item-btn"
                      @click="editOperator(operator, 'edit')"
                      >编辑</span
                    >
                  </a-menu-item>
                  <a-menu-item v-if="operator.edited" key="2">
                    <span
                      class="item menu-item-btn"
                      @click="copyOperator(operator)"
                      >复制</span
                    >
                  </a-menu-item> -->
                  <!-- <a-menu-item key="2" v-if="operator.algType===0">
                    <span class="item menu-item-btn">重命名</span>
                  </a-menu-item> -->
                  <a-menu-item
                    v-if="operator.type === 7"
                    key="3"
                    @click="checkModelInfo(operator)"
                  >
                    <span class="item menu-item-btn">模型详情</span>
                  </a-menu-item>
                  <a-menu-item v-if="operator.type !== 7" key="2">
                    <span class="item menu-item-btn">
                      <a
                        :href="operator.descUrl"
                        target="_blank"
                        style="color: rgba(0, 0, 0, 0.65);"
                        >帮助</a
                      >
                    </span>
                  </a-menu-item>
                  <a-menu-item v-if="operator.type === 7" key="4">
                    <span
                      class="item menu-item-btn"
                      @click="deleteConfirm(operator, false)"
                      >删除</span
                    >
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
            <!-- 子文件夹下的模型 -->
            <ul v-if="collapsedList.includes(operator.name)" class="models">
              <li v-for="(model, i) in operator.modelInFolder" :key="i">
                <div class="header" style="line-height: 30px;">
                  <div
                    class="label"
                    :style="{ width: '120px' }"
                    @mousedown="startDragging($event, model)"
                  >
                    <a-icon-font
                      class="item-icon"
                      :type="iconInfo(model.type, model.algType, 'icon')"
                    />
                    <a-tooltip
                      placement="top"
                      :mouse-enter-delay="0.5"
                      :overlay-style="{ 'max-width': '250px' }"
                    >
                      <template slot="title">
                        <span>{{ model.name }}</span>
                      </template>
                      <span class="label-text">{{ model.name }}</span>
                    </a-tooltip>
                  </div>
                  <a-dropdown :placement="'bottomCenter'" :trigger="['click']">
                    <a-icon type="ellipsis" class="header-btn" />
                    <a-menu slot="overlay">
                      <a-menu-item key="1" @click="checkModelInfo(model)">
                        <span class="item menu-item-btn">模型详情</span>
                      </a-menu-item>
                      <!-- <a-menu-item key="2">
                        <span class="item menu-item-btn">重命名</span>
                      </a-menu-item> -->
                      <a-menu-item
                        v-if="!isLock"
                        key="3"
                        @click="deleteConfirm(model, false)"
                      >
                        <span class="item menu-item-btn">删除</span>
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <!--  搜索  -->
    <ul v-else-if="searchResult.length > 0" class="results items scroll-bar">
      <li
        v-for="(operator, i) in searchResult"
        :key="i"
        :class="{ 'hover-item': !operator.isFolder }"
      >
        <div
          v-if="operator.isFolder"
          class="header"
          style="line-height: 30px;"
          :class="{ highlight: operator.highLight }"
        >
          <div
            style="align-items: center; display: flex;"
            :style="{ width: '140px' }"
            @click="toggleGroupStatus(operator)"
          >
            <a-icon-font
              class="folder-icon"
              type="iconwenjianjiazhankai"
            ></a-icon-font>
            <div>{{ operator.name }}</div>
          </div>
        </div>

        <div v-else class="header" :class="{ highlight: operator.highLight }">
          <div
            class="label"
            :class="{
              'operator-reject':
                operator.status === 0 ||
                operator.status === 2 ||
                operator.status === 3,
            }"
            @mousedown="startDragging($event, operator)"
          >
            <a-icon-font
              class="item-icon"
              :type="iconInfo(operator.type, operator.algType, 'icon')"
            />
            <a-tooltip placement="top" :mouse-enter-delay="0.5">
              <template slot="title">
                <span>{{ operator.name }}</span>
                <!-- 自定义算子显示状态 -->
                <span v-if="typeof operator.status === 'number'"
                  >({{ statusMap[operator.status] }})</span
                >
                <!-- 驳回的显示驳回意见 -->
                <template v-if="operator.status === 2">
                  <br />
                  <span
                    >审核意见:
                    {{
                      operator.suggestion ? operator.suggestion : '-- 空 --'
                    }}</span
                  >
                </template>
              </template>
              <span class="label-text">{{ operator.name }}</span>
            </a-tooltip>
          </div>
          <!-- <div class="actions">
            <span @click="toggleOperatorStarredState(operator)">
              <a-icon-font
                class="star-btn"
                :type="operator.starred ? 'iconshoucang' : 'iconshoucang1'"
              />
            </span>
          </div> -->
        </div>

        <!-- 子文件夹下的模型 -->
        <ul class="models">
          <li v-for="(model, i) in operator.modelInFolder" :key="i">
            <div
              class="header"
              style="line-height: 30px; padding-left: 17px;"
              :class="{ highlight: model.highLight }"
            >
              <div
                class="label"
                :style="{ width: '120px' }"
                @mousedown="startDragging($event, model)"
              >
                <a-icon-font
                  class="item-icon"
                  :type="iconInfo(model.type, model.algType, 'icon')"
                />
                <a-tooltip
                  placement="top"
                  :mouse-enter-delay="0.5"
                  :overlay-style="{ 'max-width': '250px' }"
                >
                  <template slot="title">
                    <span>{{ model.name }}</span>
                  </template>
                  <span class="label-text">{{ model.name }}</span>
                </a-tooltip>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
    <div v-else class="no-result">
      未找到算子
    </div>

    <!-- 模型训练 -->
    <div class="tranning-part">
      <div class="btn" @click="goTrainning">
        <a-icon-font type="iconqiehuantufenxibeifen2" class="icon" />
        <span>模型训练</span>
      </div>
    </div>

    <!-- 模型详情 -->
    <model-detail
      :info-visible="infoModelVisible"
      :model-data="currentModelInfo"
      :project-id="projectId"
      @close-preview="infoModelVisible = false"
    ></model-detail>

    <!-- dragging box  -->
    <div
      v-if="draggingMousePosition !== null && didDrag"
      class="dragging"
      :style="{
        top: `${draggingMousePosition.y - 80}px`,
        left: `${draggingMousePosition.x - 185}px`,
        height: `${nodeHeight - 6}px`,
        width: `${nodeWidth - 6}px`,
      }"
    >
      <div class="type-icon">
        <a-icon-font
          class="type-icon-color"
          :type="
            iconInfo(draggingOperator.type, draggingOperator.algType, 'icon')
          "
        />
      </div>
      <div class="dragging-name" :style="{ top: `${nodeHeight - 5}px` }">
        {{ draggingOperator.name }}
      </div>
    </div>

    <!-- popup -->
    <!-- 新增  编辑  算子 -->
    <operator-editor
      :visible="addEditVisible"
      :current-edit-type="currentEditType"
      @close-pop="addEditVisible = false"
      @add-success="queryOperatorList"
    />

    <a-modal
      :visible="deleteVisible"
      :keyboard="true"
      :cancel-text="'取消'"
      :ok-text="'确认'"
      centered
      :destroy-on-close="true"
      @ok="confirmDeleteFolder"
      @cancel="cancelDelete"
    >
      <div v-if="isFolder" class="modal-content">
        <div class="title">
          <a-icon-font
            type="iconweiwanpeizhi"
            class="warning-icon"
          ></a-icon-font>
          <b>{{ `确认删除文件夹“${deleteItem && deleteItem.name}”吗？` }}</b>
        </div>
        <span class="detail">删除文件夹将删除文件夹下的所有模型！</span>
      </div>
      <div v-else class="modal-content">
        <div class="title">
          <a-icon-font
            type="iconweiwanpeizhi"
            class="warning-icon"
          ></a-icon-font>
          <b>确认删除模型：{{ deleteItem && deleteItem.name }} ？</b>
        </div>
        <span class="detail">删除不会影响已导出的模型。</span>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop, Watch } from 'vue-property-decorator'
import { allOperatorList, starredOperator } from '@/api/operator-list'
import {
  queryModelById,
  createFolder,
  deleteModelInFolder,
  deleteFolder,
} from '@/api/model'
import { deleteOperator, copyOperator } from '@/api/edit-operator'
import ModelDetail from '@/components/studio/data/model/ModelDetail.vue'
import OperatorEditor from '@/components/studio/data/popup/OperatorEditor.vue'
import {
  OperatorGroupIconEnum,
  nodeIconWithBackGround,
} from '@/components/studio/data/graph-compoments/node-icon-util'
import { Modal } from 'ant-design-vue'
import DataViewStore, { Data } from '@/store/modules/dataview'

// 算子
interface OperatorItem {
  name: string
  type: number
  subType: number
  algType: number
  starred: boolean
  edited: boolean
  descUrl: string
  id?: number | null
  status?: any
  suggestion?: string
}
// 算子组
interface OperatorGroup {
  name: string
  collapsed?: boolean
  items: Array<OperatorItem>
}

@Component({
  components: { OperatorEditor, ModelDetail },
})
export default class OperatorList extends Vue {
  @Prop({
    type: Number,
    default: 0,
  })
  projectId!: number
  @Prop({ default: false }) public isLock!: boolean // 是否锁定模式
  @Prop({ type: Number, default: 0 }) pipelineId!: number
  public keyword = ''
  // 算子 ETL group list (item)
  public operatorsGroups: Array<OperatorGroup> = []
  // 搜索结果
  public searchResult: Array<OperatorItem> = []
  // 当前打开的算子菜单
  public operatorMenuOpened: {
    operator: OperatorItem
    group: OperatorGroup
  } | null = null
  // 拖拽
  public draggingOperator: OperatorItem | null = null
  public draggingMousePosition: { x: number; y: number } | null = null
  public didDrag = false
  //
  public collapsedList: Array<string> = []
  // 搜索节流
  public timeout: any = {}
  // 搜索模式
  public searchMode = false
  // 新增编辑算子
  public addEditVisible: boolean = false
  // 新增  编辑
  public currentEditType: any = {}
  // 编辑的  删除 复制 等 当前算子
  public currentOperator: OperatorItem | any = {}
  // 当前打开的menu 组group index 和 item index
  public operatorGroupIndex: number | null = null
  public operatorItemIndex: number | null = null
  // 当前打开的menu dataId（系统算子无id 使用group index 和 item index 实现）
  public menuOpenDataId: number | null = null
  // 模型详情弹框显示
  private infoModelVisible: boolean = false
  // 模型详情
  public currentModelInfo: any = {}
  private editStatus: boolean = false
  private deleteVisible: boolean = false
  private isFolder: boolean = false
  private deleteItem: any = {}
  private folderName: string | null = null

  private nodeHeight: number = 40
  private nodeWidth: number = 58

  public statusMap: any = {
    0: '待审核',
    1: '已通过',
    2: '已驳回',
    3: '已失效',
  }

  public beforeMount() {
    this.queryOperatorList()
  }

  // 监听 点击清空 当前 group index item index
  public mounted() {
    document.addEventListener('click', this.clickInit)
  }

  public clickInit() {
    this.operatorGroupIndex = null
    this.operatorItemIndex = null
  }

  public beforeDestroy() {
    document.removeEventListener('click', this.clickInit)
  }

  /**
   * 请求算子列表
   */
  public async queryOperatorList() {
    const response = await allOperatorList({
      data: { projectId: this.projectId },
    })
    if (response.data.code === 100) {
      this.operatorsGroups = response.data.result.panel
      DataViewStore.setOperatorList(this.operatorsGroups)
    }
  }

  /**
   * 新增编辑算子
   * @param type
   * @param id
   */
  public async addEditOperator(type: string, id: number | null) {
    this.currentEditType = { type, id }
    this.addEditVisible = true
  }

  @Watch('keyword')
  private _onKeywordChanged(keyword: string) {
    if (!keyword) {
      // 重新拿算子列表，（检索收藏变更问题）
      this.queryOperatorList()
      this.searchMode = false
    }
    // 搜索节流
    this.searchResult = []
    if (this.timeout) {
      clearTimeout(this.timeout)
    }
    this.timeout = setTimeout(() => this.operatorSearch(keyword), 300)
  }

  // 搜索
  public async operatorSearch(keyword: string) {
    if (keyword.replace(/^\s+|\s+$/g, '')) {
      const response = await allOperatorList({
        data: {
          projectId: this.projectId,
          searchName: keyword.replace(/^\s+|\s+$/g, ''),
        },
      })
      this.searchMode = true
      this.searchResult = response.data.result.searchList
    }
  }

  // 阻止事件传递， 阻止清空group index and item index
  public clickOperatorItem($event: MouseEvent) {
    $event.stopPropagation()
  }

  // 编辑菜单当前算子醒目显示
  public visibleChange(groupIndex: number, itemIndex: null) {
    this.operatorGroupIndex = groupIndex
    this.operatorItemIndex = itemIndex
  }

  public openUrl(url: any) {
    window.open(url)
  }

  /**
   * 添加文件夹
   */
  public addFolder(group: OperatorGroup) {
    if (!this.collapsedList.includes(group.name)) {
      this.collapsedList.push(group.name)
    }
    this.editStatus = true
  }

  public async createFolder(folderName: any) {
    if (!folderName) {
      this.editStatus = false
      this.$message.error('文件夹名不能为空！')
      return
    }
    const response = await createFolder({
      data: { projectId: this.projectId, name: folderName },
    })
    if (response.data.code === 100) {
      this.$message.success('文件夹创建成功')
    } else {
      this.$message.error(response.data.message)
    }
    this.editStatus = false
    this.queryOperatorList()
  }

  /**
   * 删除提示
   */
  public deleteConfirm(item: any, isFolder: any) {
    this.deleteVisible = true
    this.isFolder = isFolder
    this.deleteItem = item
  }

  /**
   * 删除模型文件夹
   */
  public confirmDeleteFolder() {
    this.deleteVisible = false
    if (this.isFolder) {
      this.deleteFolder(this.deleteItem.id)
    } else {
      this.deleteModel(this.deleteItem.id)
    }
  }

  /**
   * 删除文件夹
   */
  public async deleteFolder(folderId: any) {
    const response = await deleteFolder({
      data: {
        id: folderId,
        projectId: this.projectId,
        pipelineId: this.pipelineId,
      },
    })
    if (response.data.code === 100) {
      this.$message.success('文件夹删除成功')
      this.queryOperatorList()
    } else {
      this.$message.error(response.data.message, 4)
    }
  }

  /**
   * 删除模型
   */
  public async deleteModel(modelId: any) {
    const response = await deleteModelInFolder({
      data: {
        projectId: this.projectId,
        id: modelId,
        pipelineId: this.pipelineId,
      },
    })
    if (response.data.code === 100) {
      this.$message.success('模型删除成功')
      this.queryOperatorList()
    } else {
      this.$message.error(response.data.message, 4)
    }
  }

  /**
   * 查看模型详情
   */
  public async checkModelInfo(model: any) {
    const response = await queryModelById({
      data: { projectId: this.projectId, id: model.id, data: {} },
    })
    if (response.data.code === 100) {
      this.currentModelInfo = response.data.result
      DataViewStore.setSelectModel(this.currentModelInfo)
      this.infoModelVisible = true
    }
  }

  public cancelDelete() {
    this.deleteVisible = false
    this.deleteItem = {}
  }

  // 编辑菜单当前数据醒目显示
  public visibleChange2(data: Data) {
    this.menuOpenDataId = data.id
  }

  /**
   * 分组 icon
   */
  public groupIcon(subType: number) {
    return OperatorGroupIconEnum[subType]
  }

  /**
   * 节点图标 和 背景色
   */
  private iconInfo(type: number, algType: number, sign: string) {
    return nodeIconWithBackGround(type, algType)[sign]
  }

  /**
   * toggle 折叠
   * @param group
   */
  public toggleGroupStatus(group: OperatorGroup) {
    if (this.collapsedList.includes(group.name)) {
      this.collapsedList.splice(this.collapsedList.indexOf(group.name), 1)
    } else {
      this.collapsedList.push(group.name)
    }
  }

  /**
   * 收藏  取消收藏
   * @param operator
   */
  public async toggleOperatorStarredState(operator: OperatorItem) {
    if (this.isLock) {
      return
    }
    const parameters = {
      algName: operator.name,
      algType: operator.algType,
      taskType: operator.type,
      starred: !operator.starred, // 当前的收藏状态取反
    }
    const response = await starredOperator({ data: parameters })
    if (response.data.code === 100) {
      this.$message.success(
        `${parameters.starred ? '收藏' : '取消收藏'}${response.data.message}`
      )
      // 更新列表
      if (this.searchMode) {
        await this.operatorSearch(this.keyword)
      } else {
        await this.queryOperatorList()
      }
    }
  }
  /**
   * 自定义算子编辑
   */
  public editOperator(operator: OperatorItem, type: string) {
    this.currentEditType = { type, id: operator.id }
    this.addEditVisible = true
  }

  /**
   * 自定义算子复制
   */
  public async copyOperator(operator: OperatorItem) {
    const response = await copyOperator({ data: { id: operator.id } })
    if (response.data.code === 100) {
      this.$message.success(response.data.message)
      await this.queryOperatorList()
    }
  }

  /**
   * 自定义算子删除
   */
  public deleteOperator(operator: OperatorItem) {
    this.currentOperator = operator
    Modal.confirm({
      title: '确认要删除该自定义算子吗？',
      content: `删除算子：${this.currentOperator.name}`,
      centered: true,
      okText: '确定',
      cancelText: '取消',
      onOk: this.confirmDeleteOperator,
    })
  }

  /**
   * 自定义算子确认删除
   */
  public async confirmDeleteOperator() {
    const response = await deleteOperator({
      data: { id: this.currentOperator.id },
    })
    if (response.data.code === 100) {
      this.$message.success(response.data.message)
      await this.queryOperatorList()
    }
  }

  // dragging
  public startDragging(event_: MouseEvent, operator: OperatorItem) {
    if (this.isLock) {
      return
    }
    // if (operator.status === 1 || operator.status === null) { // 取消了算子收藏和审核机制
    this.draggingMousePosition = { x: event_.pageX, y: event_.pageY }
    this.didDrag = false
    this.draggingOperator = operator
    const mouseMoveHandler = ($event: MouseEvent) => {
      this.didDrag = true
      this.draggingMousePosition = { x: $event.pageX, y: $event.pageY }
      const graphs = document.querySelectorAll('.graph') as NodeListOf<
        HTMLElement
      >
      const rect = graphs[0].getBoundingClientRect()
      const graphPosition = [rect.left, rect.top]
      const graphWidthHeight = [rect.width, rect.height]
      if (
        this.draggingMousePosition.x > graphPosition[0] &&
        this.draggingMousePosition.x < graphPosition[0] + graphWidthHeight[0] &&
        this.draggingMousePosition.y > graphPosition[1] &&
        this.draggingMousePosition.y < graphPosition[1] + graphWidthHeight[1]
      ) {
        this.$emit('drag-position', { node: operator, event: $event })
      }
    }
    const mouseUpHandler = ($event: MouseEvent) => {
      if (
        this.draggingOperator !== null &&
        this.draggingMousePosition !== null
      ) {
        const graphs = document.querySelectorAll('.graph') as NodeListOf<
          HTMLElement
        >
        const rect = graphs[0].getBoundingClientRect()
        const graphPosition = [rect.left, rect.top]
        const graphWidthHeight = [rect.width, rect.height]
        const dragPosition = this.draggingMousePosition
        if (
          dragPosition.x > graphPosition[0] &&
          dragPosition.x < graphPosition[0] + graphWidthHeight[0] &&
          dragPosition.y > graphPosition[1] &&
          dragPosition.y < graphPosition[1] + graphWidthHeight[1]
        ) {
          this.$emit('add-operator', {
            dropped: this.draggingOperator,
            event: $event,
          })
        }
      }
      this.draggingMousePosition = null
      document.removeEventListener('mousemove', mouseMoveHandler)
      document.removeEventListener('mouseup', mouseUpHandler)
    }
    document.addEventListener('mousemove', mouseMoveHandler)
    document.addEventListener('mouseup', mouseUpHandler)
    // }
  }

  // 模型训练
  public goTrainning() {
    // this.$router.push(this.$route.path.replace(/data/, `trainning/${this.pipelineid}`))
    this.$router.push(this.$route.path.replace(/data/, 'trainning'))
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/panelList';

.operator-list {
  flex: 1;
  height: 70%;
  padding-bottom: 65px;
}

.star-btn {
  margin-right: 35px;
}

.star-btn,
.star-btn:hover {
  color: #6570ff;
  font-size: 20px;
}

.a-link {
  background-color: #efefef;
  color: rgba(0, 0, 0, 0.65);
  padding: 5px 0;
  width: 100%;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.2);
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 1000;
}

.window {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  height: 250px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
}

.modal-content {
  .title {
    align-items: center;
    display: flex;
    font-size: 16px;
    margin-bottom: 20px;
    padding: 32px 32px 0;
  }

  .detail {
    margin-left: 64px;
  }

  .warning-icon {
    font-size: 24px;
    margin-right: 14px;
  }
}

/deep/.ant-modal-footer {
  border-top: 0;
}
</style>
